import React from 'react'
import { tabberRouter } from "../../router";
import { TabBar } from "antd-mobile";
import style from './index.module.css'
import { useLocation ,useNavigate} from "react-router-dom";
function Tabber() {
    const location = useLocation()
    const navigate = useNavigate()
  const { pathname } = location
  const setRouteActive=(val)=>{
    navigate(val)
  }
  return (
    <div style={{height:'50px'}}>
    <div className={style.tabbar}>
    <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)}>
    {tabberRouter.map((item) => (
      <TabBar.Item key={item.path} title={item.meta.title} />
    ))}
  </TabBar>
    </div>
  </div>
  )
}

export default Tabber
